<template>
  <div>
    <div>
      <el-form :inline="true" :model="addUser">
        <el-form-item label="用户名">
          <el-input v-model="addUser.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="addUser.password" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="addUserAction">添加用户</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table
          :data="tableData"
          style="width: 100%"
          :row-class-name="tableRowClassName">
        <el-table-column
            prop="username"
            label="用户名">
        </el-table-column>
        <el-table-column
            prop="status"
            label="签到状态">
          <template slot-scope="scope">
            {{ scope.row.status === 0 ? '签到失败' : '签到成功' }}
          </template>
        </el-table-column>
        <el-table-column
            prop="lastCheck"
            label="上次签到时间">
          <template slot-scope="scope">
            {{ formatDate(scope.row.lastCheck) }}
          </template>
        </el-table-column>
        <el-table-column
            prop="id"
            label="操作"
        >
          <template slot-scope="scope">
            <el-button
                :disabled="scope.row.status===1"
                size="mini"
                type="primary"
                @click="rePunch(scope.$index, scope.row)">补签
            </el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除用户
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import * as qs from "qs";

export default {
  name: "User",
  data() {
    return {
      addUser: {
        username: '',
        password: ''
      },
      tableData: []
    }
  },
  mounted() {
    this.listUserAction();
  },
  methods: {
    formatDate(timeStamp) {
      return dayjs(timeStamp).format('YYYY-MM-DD HH:mm:ss')
    },
    rePunch(index, row) {
      this.$axios.get("/api/punch/one?userId=" + row.id, {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }).then(res => {
        console.log(res)
        if (res.data.code === 0) {
          this.$message({
            type: 'success',
            message: '补签成功!'
          });
          this.listUserAction();
        } else {
          throw "补签失败";
        }
      }).catch(err => {
        this.$message({
          type: 'error',
          message: '补签失败!'
        });
      })
    },
    listUserAction() {
      this.$axios.get("/api/user/list").then(res => {
        if (res.data.code === 0) {
          this.tableData = res.data.data;
        }
      }).catch(err => {
        console.log(err)
      })
    },
    addUserAction() {
      if (this.addUser.username.trim() === "" || this.addUser.password.trim() === "") {
        this.$message({
          type: 'warning',
          message: '用户名或密码不能为空!'
        });
        return false;
      }
      this.$axios.post("/api/user/add", JSON.stringify([{
        username: this.addUser.username,
        password: this.addUser.password
      }]), {
        headers: {
          "Content-Type": "application/json"
        }
      }).then(res => {
        if (res.data.code === 0) {
          this.$message({
            type: 'success',
            message: '添加成功!'
          });
          this.listUserAction();
        } else {
          throw "添加失败，用户名或密码不正确！";
        }
        this.addUser = {
          username: '', password: ''
        }
      }).catch(err => {
        console.log(err)
        this.$message({
          type: 'error',
          message: err
        });
        this.addUser = {
          username: '', password: ''
        }
      })
    },
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除该账户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.post("/api/user/delete", qs.stringify({id: row.id}), {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        }).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.listUserAction();
        }).catch(err => {
          this.$message({
            type: 'error',
            message: '删除失败!'
          });
        })
      }).catch(err => {
        console.log(err)
      })

    },
    tableRowClassName({row, rowIndex}) {
      if (row.status === 0) {
        return 'warning-row';
      }
    }
  }
}
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
